<template>
    <section class="pageSty">
        <h1>发布文章</h1>
        <section class="flex-start">
            <section class="titSty">文章标题:</section>
            <el-input v-model="title" class="inputSty" placeholder="输入文章叫什么名字"></el-input>
        </section>

        <section class="flex-start" style="margin: .1rem 0;">
            <section class="titSty">文章分类:</section>
            <el-select v-model="classId" class="m-2" placeholder="选择文章属于什么分类">
                <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </section>
        <div class="wangeditor">
            <wang-editor
                :contentHtml="data.contentHtml"
                v-on:getWangEditorValue="getWangEditorValue"
                ref="wangRef"
            ></wang-editor>
        </div>
        <el-button type="primary" @click="submit">确认发布</el-button>
    </section>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { getClass, writeArticle } from '../../api/index'
import WangEditor from "../../components/WangEditor.vue";
import { ElMessage } from 'element-plus'
// 文章标题
const title = ref('')
const classId = ref('')
const wangRef = ref()
const classList = ref([
    { name: '名称', id: 0 }
])
const data = reactive({
    // 设置富文本内容 contentHtml:'渲染的富文本内容'
    contentHtml: "",
});
function getWangEditorValue(str: string) {
    data.contentHtml = str;
};
function submit() {
    let params = {
        userId: sessionStorage.getItem('userId'),
        name: title.value,
        classId: classId.value,
        contentHtml: data.contentHtml
    }
    writeArticle(params).then((res: any) => {

        if (res.status == 200) {
             ElMessage.success('发布成功')
             setTimeout(() => {
                  location.reload()
             }, 2000);
        } else {
            ElMessage.warning(res.message)
        }
    })
}
function getClassFun() {
    getClass().then((res: any) => {
        classList.value = res.data
    })
}
getClassFun()

</script>

<style>
.pageSty {
    padding: 0.1rem;
}
.titSty {
    font-size: 0.2rem;
    margin-right: 10px;
}
.inputSty {
    width: 40%;
}
.wangeditor {
    width: 80%;
}
</style>